<template>
    <div>
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">拜访</span>
                </div>
            </van-nav-bar>
        </div>

        <!--拜访人信息-->
        <div class="module-box visit-info">
            <div class="title">拜访人信息</div>

            <van-cell-group>
                <van-field label="拜访人姓名" v-model="visitOwnerName" placeholder="请输入拜访人姓名" required/>
                <van-field label="号/室" v-model="visitOwnerAddress" placeholder="请输入号/室" required/>
            </van-cell-group>
        </div>


        <!--温馨提示-->
        <div class="module-box tips-info">
            <div class="title">温馨提示进入小区流程：</div>
            <p>1.填写拜访信息</p>
            <p>2.生成二维码</p>
            <p>3.让小区保安扫描，方可进入</p>
        </div>

        <div class="btn-box">
            <van-button block @click="getQRCode()">生成二维码</van-button>
        </div>
    </div>
</template>

<script>
    import {NavBar, Field, CellGroup, Button, Toast} from 'vant';

    export default {
        name: 'visit',

        components: {
            [NavBar.name]: NavBar,
			[CellGroup.name]: CellGroup,
            [Field.name]: Field,
			[Button.name]: Button,
			[Toast.name]: Toast,
        },

        props: {},

        data() {
            return {
				visitOwnerName: '',              //拜访的业主名称
				visitOwnerAddress: '',           //拜访的业主地址
            }
        },

        mounted() {

        },

        methods: {
			//点击返回
			onClickLeft(){
				this.$router.go(-1);
			},

            //点击生成二维码
			getQRCode(){
				//必填信息验证
				if(!this.visitOwnerName || !this.visitOwnerAddress){
					Toast('请录入必填信息');
					return;
				}

				//把被被拜访的业主信息存在本地
				this.$Cookies.set('visitOwnerName', this.visitOwnerName);
				this.$Cookies.set('visitOwnerAddress', this.visitOwnerAddress);

				this.$router.push('/visitQRCode');
            },


        },
    }
</script>

<style lang="scss" scoped>
    /*拜访人信息*/
    .visit-info{

        .title{
            font-size: 18px;
            font-weight: bold;
            color: #222222;
            padding: 16px 12px;
        }

        /*表单样式覆盖*/
        .van-cell-group{
            background-color: transparent;

            &::after {
                border: none;
            }

            .van-cell{
                background-color: transparent;
                border-top: 1px solid #ebedf0;
                padding-top: 16px;
                padding-bottom: 16px;
                font-size: 15px;
                color: #999999;

                &::after {
                    border: none;
                }
            }
            .van-cell--required::before{
                color: #999999;
            }
        }
    }

    /*温馨提示*/
    .tips-info{
        padding: 16px 12px;
        font-size: 15px;
        color: #222222;

        .title{
            font-weight: bold;
        }
        p{
            margin: 0;
            margin-top: 12px;
        }
    }

    /*提交按钮*/
    .btn-box{
        width: 94%;
        margin: 0 auto;
        margin-top: 80px;

        .van-button--default {
            background: linear-gradient(to bottom right, #61dda3, #07b6d5);
            border-radius: 8px;
        }
        .van-button__text{
            font-size: 18px;
            font-weight: bold;
            color: white;
        }
    }
</style>

